<template>
  <component
    :is="dialog ? 'el-dialog' : 'div'"
    title="操作日志"
    :modelValue="visible"
    align-center
    width="1100px"
    class="public-dialog"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="bg-white" :class="{ 'p-[16px]': !dialog }">
      <vxe-grid v-bind="tableOptions" ref="tableRef" class="log-table" />
    </div>
    <template v-if="dialog" #footer>
      <el-button @click="handleClose">关 闭</el-button>
    </template>
  </component>
</template>

<script setup lang="jsx">
import { getBusinessLog } from '@/api/public.js'
import { nextTick, watch } from 'vue'
const tableRef = ref()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  tag: {
    type: String,
    default: '',
  },
  business_id: {
    type: [String, Number],
    default: '',
  },
  dialog: {
    type: Boolean,
    default: false,
  },
  autoLoad: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['close'])

const isArray = e => {
  return Object.prototype.toString.call(e) === '[object Array]'
}

watch(
  () => props.business_id,
  val => {
    nextTick(() => {
      if (val) {
        tableRef?.value?.commitProxy('query')
      }
    })
  }
)

const tableOptions = reactive({
  height: 560,
  border: 'inner',
  pagerConfig: { pageSize: 10 },
  columns: [
    {
      field: 'create_user',
      title: '操作人',
      width: 200,
    },
    { field: 'create_time', title: '所属部门', width: 300 },
    {
      field: 'op_content',
      title: '处理事项',
      minWidth: 300,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {isArray(row.content)
                ? row.content.map(n => (
                    <div>
                      <span class='mr-[4px] min-w-[80px] inline-block'>
                        {n.label}
                      </span>
                      <span>{n.new}</span>
                    </div>
                  ))
                : row.content}
            </div>
          )
        },
      },
    },
    {
      field: 'created_at',
      title: '操作时间',
      minWidth: 140,
    },
  ],
  proxyConfig: {
    autoLoad: props.autoLoad,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: ({ page }) => {
        return getBusinessLog({
          ...page,
          tag: props.tag,
          business_id: props.business_id,
        })
      },
    },
  },
})

const handleClose = () => {
  emit('update:modelValue', false)
}
</script>
